<template>
	<view class="all">
		<view class="bg"></view>
		<view class="top">
			<view class="title">汽车惠民活动走进群众生活</view>
			<view class="subTitltle">
				<view>济源某某汽车行业</view>
				<view>2025/5/25 11:09</view>
			</view>
			<image src="/static/05refuel/background@3x.png" mode=""></image>
			<view class="content">哇噻!薅羊毛的看过来!易车修汽车维修服务中心出优惠团购了!
			纯手工洗车只要25元一次，还增20元油券，够意思了吧!哇噻!薅羊毛的看过来!
			易车修汽车维修服务中心出优惠团购了!纯手工洗车只要25元一次，还增20元油券，
			够意思了吧!</view>
		</view>
		<view class="bottom">
			<view class="price">
				<view>价格：￥99.00</view>
				<view>原价：￥199.00</view>
			</view>
			<view class="date">活动起止日期：2023-3-10 08:00 至 2023-3-18 23:59</view>
			<view class="phone">咨询电话：0379-666666666</view>
			<view class="mark">注意事项：暂无</view>
		</view>
		
	</view>
</template>

<script setup>
	
</script>

<style scoped>
/* 全局背景 */
.all{
	padding-top: 10rpx;
	box-sizing: border-box; 
	position: relative;
	z-index: 1;
}
.bg{
	background-color: #0472fe;
	width: 100%;
	height: 300rpx;
	position: absolute;
	z-index: -1;
	top: 0;
	right: 0;
}	       
.top, .bottom{
	background-color: #fff;
	border-radius: 20rpx;
	margin: 20rpx 10rpx;
	padding: 20rpx;
	
}
.top .title{
	font-size: 36rpx;
	text-align: center;
	margin: 10rpx;
}
.top .subTitltle{
	display: flex;
	justify-content: space-between;
	font-size: 24rpx;
	opacity: .6;
	margin: 15rpx 0;
}
.top image{
	width: 690rpx;
	height: 400rpx;
	border-radius: 20rpx;
}
.top .content{
	font-size: 26rpx;
	text-indent: 2em;
	line-height: 50rpx;
}



.bottom .price{
	display: flex;
}
.bottom view{
	margin: 10rpx;
}
.bottom .price :nth-child(1){
	font-size: 32rpx;
	color: darkorange;
}

.bottom .price :nth-child(2){
	margin-left: 20rpx;
	font-size: 24rpx;
	opacity: .6;
	line-height: 50rpx;
	text-decoration: line-through
}
.date, .phone, .mark{
	font-size: 24rpx;
}
</style>
